<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="96px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="项目负责人" prop="projectLeader">
        <el-input v-model="queryParams.projectLeader" placeholder="请输入项目负责人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini"
          @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini"
          :disabled="!chosenProjectArr.length" @click="handleDelete">删除</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="projectList" style="width: 100%;" @selection-change="getSelectedData">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="项目名称" align="left" prop="projectName" min-width="140" :show-overflow-tooltip="true" />
      <el-table-column label="项目负责人" align="center" prop="projectLeader" min-width="120" />
      <el-table-column label="项目类型" align="center" prop="projectType" min-width="90">
        <template slot-scope="scope">{{ scope.row.projectType==1?"word":"excel" }}</template>
      </el-table-column>
      <el-table-column label="项目描述" align="left" prop="projectDesc" min-width="180" :show-overflow-tooltip="true" />
      <el-table-column label="备注" align="left" prop="remark" min-width="160" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
      <el-table-column label="修改时间" align="center" prop="updateTime" width="160" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="325">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit"
            @click="handleEdit(scope.row)" v-hasPermi="['monitor:online:forceLogout']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-document"
            @click="contentInfo(scope.row)">文档编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-document"
            @click="previewInfo(scope.row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" />

    <!-- 项目新增-start -->
    <el-dialog title="新增项目" :visible.sync="projectAddVisible" :before-close="resetProjectForm" :width="device=='mobile'?'96%':'762px'">
      <project-add ref="projectAddPart" @getProjectList="getProjectList" @closeAddPage="closeAddPage"></project-add>
      <div slot="footer" class="dialog-footer">
        <el-button @click="projectAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProjectInfo('add')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 项目新增-end -->
    <!-- 项目编辑-start -->
    <el-dialog title="修改项目" :append-to-body="true" :visible.sync="projectEditVisible" :width="device=='mobile'?'96%':'762px'">
      <project-add ref="projectEditPart" @getProjectList="getProjectList" @closeEditPage="closeEditPage"></project-add>
      <div slot="footer" class="dialog-footer">
        <el-button @click="projectEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProjectInfo('edit')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 项目编辑-end -->
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { listProject, deleteProject, checkContentState } from "@/api/project/project";
  import ProjectAdd from '@/views/project/ProjectAdd';

  export default {
    name: "Project",
    components:{ ProjectAdd },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 表格数据
        projectList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          projectName:"",
          projectLeader:""
        },
        chosenProjectArr:[],
        currentProjectId:"",
        // 新增编辑
        projectForm:{},
        projectAddVisible:false,
        projectEditVisible:false,
        // 模板选择
        choiceVisible:false,
        currentPatternId:"",
        currentPatternName:"",
        patternList: [],
      };
    },
    computed: {
      ...mapGetters([
        'device'
      ])
    },
    mounted() {
      this.getProjectList();
    },
    methods: {
      // 项目列表
      getProjectList() {
        this.loading = true;
        listProject(this.queryParams).then(ret => {
          if(ret.code == 200){
            this.projectList = ret.rows;
            this.total = ret.total;
            this.loading = false;
          }else{
            this.loading = false;
            this.$message.error(ret.msg);
          }
        }).catch(err=>{
          this.loading = false;
        });
      },

      // 搜索
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getProjectList();
      },

      // 重置
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },

      // 获取选中信息
      getSelectedData(value){
        this.chosenProjectArr = [];
        if(value.length){
          for(var i in value){
            this.chosenProjectArr.push(value[i].projectId);
          }
        }
      },

      // 新增
      handleAdd(){
        this.projectAddVisible = true;
        this.$nextTick(()=>{
          this.$refs.projectAddPart.$refs.projectForm.resetFields();
        })
      },
      resetProjectForm(done){
        this.$refs.projectAddPart.$refs.projectForm.resetFields();
        setTimeout(() => {
          done();
        }, 100);
      },

      // 修改
      handleEdit(info){
        this.projectEditVisible = true;
        this.$nextTick(()=>{
          this.$refs.projectEditPart.getDetail(info.projectId);
        })
      },

      // 保存
      saveProjectInfo(type){
        if(type == "add"){
          this.$refs.projectAddPart.saveInfo();
        }else{
          this.$refs.projectEditPart.saveInfo();
        }
      },

      // 项目内容管理
      contentInfo(info){
        let path = "", query = {};
        if(info.projectType == 1){
          path = '/project/projectWordContent';
          query = {
            projectId:info.projectId
          };
        }else{
          path = '/project/projectExcelContent';
          query = {
            projectId:info.projectId,
            heading:info.heading
          };
        }
        this.$router.push({
          path:path,
          query:query
        })
      },

      // 项目内容预览
      previewInfo(info){
        let path = "", query = {};
        if(info.projectType == 1){
          path = '/project/projectWordPreview';
          query = {
            projectId:info.projectId
          };
        }else{
          path = '/project/projectExcelPreview';
          query = {
            projectId:info.projectId,
            heading:info.heading
          };
        }
        let newpage = this.$router.resolve({
          path:path,
          query:query
        })
        window.open(newpage.href, '_blank');
      },

      // 删除
      handleDelete(){
        this.$confirm("您确定要删除已选中的项目？！", "提示", {
          confirmButtonText:"删除",
          cancelButtonText:"取消",
          type:"warning"
        }).then(()=>{
          deleteProject(this.chosenProjectArr.join(",")).then(ret=>{
            if(ret.code == 200){
              this.$message.success("删除成功！");
              this.handleQuery();
            }else{
              this.$message.error(ret.msg);
            }
          }).catch(err=>{
            console.log(err);
          })
        }).catch(()=>{})
      },

      // 关闭弹窗
      closeAddPage(){
        this.projectAddVisible = false;
      },
      closeEditPage(){
        this.projectEditVisible = false;
      }
    }
  };
</script>